<template>
	<section class="wrapper" @keyup.enter="doLogin">
		<el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">
			<el-row>

				<el-col :span="4">
					<el-form-item label="状态:">
						<el-select v-model="filter.status" size="small">
							<el-option label="全部状态" value=""></el-option>
							<el-option label="成功" value="success"></el-option>
							<el-option label="出错" value="error"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="手机号:">
						<el-input placeholder="手机号" v-model="filter.mobile" size="small"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="内容:">
						<el-input placeholder="内容" v-model="filter.content" size="small"></el-input>
					</el-form-item>
				</el-col>
				

			</el-row>
			
			<el-row>
				<el-col :span="24" class="action_col">
					<el-form-item class="action_button_group_open">
						<el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
						</el-button>
						<el-button size="small" type="primary" @click="getlists" icon="el-icon-search">查询</el-button>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row>
				<el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%"  >
					<el-table-column label="序号" type="index" width="75" align="center"></el-table-column>
					
					<el-table-column prop="mobile" label="手机号" min-width="100" align="center">
					</el-table-column>
					<el-table-column prop="content" label="内容" min-width="195" align="center">
					</el-table-column>
					<el-table-column prop="status" label="发送状态" min-width="60" align="center">
					</el-table-column>
					<el-table-column prop="gmtCreate" label="发送时间" min-width="110" align="center">
						 <template scope="scope">
                            <span>{{scope.row.gmtCreate | formatUpdateTime}}</span>
                        </template>
					</el-table-column>
					
				</el-table>

			</el-row>
			<el-row class="paging">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="pagingData.pageNum" :page-sizes="pagingData.pageSizes" :page-size="20" layout="total, sizes, prev, pager, next, jumper" :total="pagingData.total">
				</el-pagination>
			</el-row>
		</el-form>
	</section>
</template>

<script>
	import Vue from 'vue'
	import { mapGetters } from 'vuex'
	import { Row, Col, Form, FormItem, Button, Select, Option, DatePicker, Table, Pagination, TableColumn, Input, Tabs, TabPane, Message, MessageBox } from 'element-ui';
	import { getDate, getArraySub, getLevelName, validTel, setToken, getCookie } from '../../utils/auth';

	Vue.use(Row);
	Vue.use(Col);
	Vue.use(Form);
	Vue.use(FormItem);
	Vue.use(Button);
	Vue.use(Select);
	Vue.use(Input);
	Vue.use(Option);
	Vue.use(DatePicker);
	Vue.use(Table);
	Vue.use(Tabs);
	Vue.use(TabPane);
	Vue.use(TableColumn);
	Vue.use(Pagination);

	Vue.prototype.$message = Message;
	Vue.prototype.$confirm = MessageBox.confirm;
	export default {
		head() {
			return {
				title: this.title,
			}
		},
		data() {
			return {
				tabName: '短信记录',
				title: "短信记录",
				filter: {
					mobile: '', 
					content: '', 
					status: '', 
					pageSize: 20,
					pageNum: 1, //页码
				},
				tableData: [],
				pagingData: {
					pageSizes: [10, 20, 50, 1000], // 每页可选条数列表,
					total: 0,
					pageNum: 1
				},
			}
		},
		computed: {
			...mapGetters({
				'pageTabsList': 'getPageTabsList'
			})
		},
		filters: {
            formatUpdateTime(time) {
                if(!time) return '';
                let date = new Date(time);
                return getDate(date,true);
            }
        },
		methods: {

			//点击enter实现搜索
			doLogin(event) {
				var e = event || window.event || arguments.callee.caller.arguments[0];
				if(e && e.keyCode == 13) {
					this.getlists();
				}
			},

			empty() {
				let pageSize = this.filter.pageSize;
				let pageNum = this.filter.pageNum;
				this.filter = {
						mobile: '', 
						content: '', 

						status: '', 

						pageSize: pageSize,
						pageNum: pageNum, //页码
					}

			},

			getlists() {

				this.$store.dispatch('getMessageInfoList',
						this.filter
					)
					.then((response) => {
						if(!response) {
							return
						}
						let result = response.data;
						if(result.successed = true) {
							this.tableData = result.data.list;
							for(let i = 0; i < this.tableData.length; i++) {
								
								if(this.tableData[i].status = 'success'){
									this.tableData[i].status = '成功'
								}
							}
							this.pagingData.total = result.data.total;
							this.pagingData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
						} else if(result.data = null) {
							this.pagingData.total = 0;
							this.pagingData.pageNum = 0;
						} else {
							this.customerList = [];
							this.pagingData.total = 0;
							this.pagingData.pageNum = 0;
						}
					})
			},

			handleCurrentChange(val) {
				this.filter.pageNum = val;
				this.getlists(this.filter);
			},
			handleSizeChange(val) {
				this.filter.pageSize = val;
				this.filter.pageNum = 1;
				this.getlists(this.filter);
			},

		},
		created() {
			//pageTab
			if(process.BROWSER_BUILD) {
				if(this.pageTabsList[this.pageTabsList.length - 1].name == 'CRM') {
					let arr = this.pageTabsList;
					arr[arr.length - 1].name = this.tabName;
					this.$store.commit('PAGETABSLIST', {
						data: arr
					})
				}
			}
		},
		mounted() {
			this.getlists();
		},

	}
</script>

<style lang="scss">
	.wrapper {
		a,
		a:hover,
		a:focus,
		a:visited {
			-webkit-text-decoration-line: underline;
			text-decoration-line: underline;
		}
		.margin-table1{z-index: 0 !important;opacity: 0;height:0 !important;overflow: hidden;}
		
		.paging {
			margin-top: 20px;
		}
		.el-form {
			.el-form-item {
				width: 70%
			}
			.asd {
				font-size: 13px;
				color: #7A7A7A;
			}
		}
	}
</style>